<template>
  <el-card>
    <el-row
      class="line-chart"
      type="flex"
      justify="space-between"
      align="middle"
    >
      <span class="title">迟发率</span>
      <div>
        <el-button type="link" @click="weekstatic()">最近7天</el-button>
        <el-button type="link" @click="monthstatic()">最近30天</el-button>
        <el-date-picker
        v-model="dates"
        type="daterange"
        range-separator="To"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          placeholder="请选择日期"
          format="YYYY/MM/DD"
        value-format="YYYY-MM-DD"
        />
      </div>
    </el-row>
    <div

      id="deliverLineEchart"
      style="width: 100%; height: 510px;margin-top:20px"
    />
  </el-card>
</template>

<script setup>
import { onMounted, onUnmounted,watch } from 'vue'
import * as echarts from 'echarts'
import {getlatetrends } from '@/api/data'
import {ref, reactive } from 'vue'
import {showLoading,closeLoading } from '@/utils/common'

let end = new Date()
let start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 6)
const dates = ref([filterTime(start), filterTime(end)])
const res = {
  infor: 'true',
  date: [
  ],
  sumaodatas: [

  ],
  lxdatas: [

  ],
  lxlateorders: [

],
smlateorders: [

],
}
const SortNum = (a, b) => {
  return a - b
}
const getTrendDataInfo = async () => {
  let parmes = {
    startDate:dates.value[0],
    endDate:dates.value[1]
  }
  showLoading()
  getlatetrends(parmes).then((result) => {
    closeLoading()
    if (result.errcode == 0) {
		let data = result.content;
		res.date = data.dates
		res.sumaodatas = data.sumaodatas
		res.lxdatas = data.lxdatas
		res.lxlateorders = data.lxlateorders
		res.smlateorders = data.smlateorders
		InitLineEachart('deliverLineEchart', res)
    }
  });
}
getTrendDataInfo()
// const chart = ref()
// 初始化图表
let myChart = null
function InitLineEachart(ele, res) {
  var ordersArr = res.orders
  var salesArr = res.sales
  // const ordersArr_ = ordersArr.sort(SortNum)
  // const salesArr_ = salesArr.sort(SortNum)
  const option = {
		// 标题组件，包含主标题和副标题
		title: {
			text: "迟发指标",
			padding: 5,
			textStyle: {
				color: "#fff"
			},
			left: 20,
			top: 0
		},
		// 提示框组件  鼠标经过 tip提示
		tooltip: {
			trigger: "axis",
			backgroundColor: "rgba(0, 0, 0, 1)",
			borderColor: "rgba(0, 0, 0, 1)",
			padding: [16, 24],
			textStyle: {
				color: "#fff"
			},
			axisPointer: {
				type: "cross",
				crossStyle: {
					color: "#999"
				}
			}
		},
		// 图例组件
		legend: {
			show: true, // 是否显示图例
			// 边框宽度和内边距属性值为数值，不加单位。
			orient: "horizontal", // 图例的朝向    vertical-垂直显示  horizontal-水平显示
			data: ["领星迟发量", "速猫迟发量", "领星迟发率",'速猫迟发率'],
			left: 140, // x轴方向取值 left/center/right  具体像素值或百分比
			top: 24, // y轴方向取值 top/center/bottom
			textStyle: {
				// 设置图例文字样式
				color: "#ccc",
				fontSize: 13
			}
		},
		// 上下左右及大小-设置图表占总面积的地方
		grid: {
			left: "12%", //左侧 y轴内容距离边框的距离（类似padding-left）
			top: "27%", // 与容器顶部的距离
			right: "12%",
			bottom: "10%" // 与容器底部的距离
		},
		// grid坐标系的x轴
		xAxis: [
			{
				type: "category",
				data: res.date,
				axisPointer: {
					type: "shadow"
				},
				axisTick: {
					show: false // 不显示坐标轴刻度线
				}
			}
		],
		// grid坐标系的y轴
		yAxis: [
			{
				type: "value",
				name: "订单量",
				min: 0,
				// max: 100,
				// interval: 20,
				splitLine: {
					//分割线配置
					show: true,
					lineStyle: {
						color: "rgb(64, 94, 134)",
						width: 1
					}
				},
				axisLabel: {
					formatter: "{value}"
				}
			},
			{
				type: "value",
				name: "迟发率",
				min: 0,
				max: 100,
				interval: 40,
				splitLine: {
					//分割线配置
					show: true,
					lineStyle: {
						color: "rgb(64, 94, 134)",
						width: 1
					}
				},
				axisLabel: {
					formatter: "{value} %"
				}
			}
		],
		// 系列列表。每个系列通过 type 决定自己的图表类型
		series: [
			{
				name: "领星迟发量",
				type: "bar",
				// barWidth: 8, // 柱状图粗细
				// barGap: 8, // 柱图之间的间距
				itemStyle: {
					normal: {
						color: "#6633FF",
						barBorderRadius: [6, 6, 0, 0]
					}
				},
				tooltip: {
					valueFormatter: function (value) {
						return value;
					}
				},
				data: res.lxlateorders
			},
			{
				name: "速猫迟发量",
				type: "bar",
				// barWidth: 8, // 柱状图粗细
				// barGap: 8, // 柱图之间的间距
				itemStyle: {
					normal: {
						color: "#00F0FF",
						barBorderRadius: [6, 6, 0, 0]
					}
				},
				tooltip: {
					valueFormatter: function (value) {
						return value;
					}
				},
				data: res.smlateorders
			},
			{
				name: "领星迟发率",
				type: "line",
				yAxisIndex: 1,
				smooth: true,
				itemStyle: {
					normal: {
						color: "#6633FF",
						barBorderRadius: [6, 6, 0, 0]
					}
				},
				tooltip: {
					valueFormatter: function (value) {
						return value + " %";
					}
				},
				data: res.lxdatas
			},
      {
				name: "速猫迟发率",
				type: "line",
				yAxisIndex: 1,
				smooth: true,
				itemStyle: {
					normal: {
						color: "#00F0FF",
						barBorderRadius: [6, 6, 0, 0]
					}
				},
				tooltip: {
					valueFormatter: function (value) {
						return value + " %";
					}
				},
				data: res.sumaodatas
			}
		]
	}

  var chartDom = document.getElementById(ele)
  myChart = echarts.init(chartDom)
  option && myChart.setOption(option)
}
watch(
  () => dates.value,
  (newValue, oldValue) => {
    getTrendDataInfo()
  }
);
const weekstatic=()=>{
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      dates.value = [filterTime(start),filterTime(end)]
}

const monthstatic=()=>{
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      dates.value = [filterTime(start),filterTime(end)]

}
const onResize = () => {
  // var opt = myChart.getOption()
  // myChart.clear()
  myChart && myChart.resize()
  console.log(7)
  // myChart.setOption(opt)
}
onMounted(() => {
  // InitLineEachart('deliverLineEchart', res)
  window.addEventListener('resize', onResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', onResize)
})
function filterTime(time) {
        let date = new Date(time);
        let y = date.getFullYear();
        let m = date.getMonth() + 1;
        m = m < 10 ? "0" + m : m;
        let d = date.getDate();
        d = d < 10 ? "0" + d : d;
        return y + "-" + m + "-" + d;
    }
</script>

<style lang="scss" scoped>
.line-chart {
.title {
    font-size: 18px;
    font-weight: bold;
    color: #000;
}
}
</style>
